<script setup>
import {ref, inject, onMounted, onBeforeUnmount} from 'vue'
import Editor from '@tinymce/tinymce-vue'
import axios from 'axios'


const userinfo=inject('userinfo')
const organization=defineModel('organization')

const content=ref('')
const setting={
    width: '100%', //  设置富文本编辑器宽度
    min_height: 400, //  设置富文本编辑器高度
    max_height: 800,
    menubar: false, // 设置富文本编辑器菜单, 默认true
    branding: false, // 关闭底部官网提示 默认true
    statusbar: true, // 显示底部状态栏 默认true
    readonly: false, // 设置只读属性 默认 false
    resize: true, // 调节编辑器大小 默认 true
    placeholder: '请输入内容', // 占位符

    theme:'silver',
    skin:'oxide',
    content_style: 'body, p{font-size: medium;}', // 为内容区编辑自定义css样式
    language_url: '/tinymce/langs/zh_CN.js', // 中文化 默认为英文
    language: 'zh_CN', // 设置富文本编辑器语言

    plugins: ['save','searchreplace','lists','advlist', 'anchor','autolink', 'autoresize','image', 'preview', 'media', 'link','codesample', 'code', 'emoticons', 'fullscreen', 'help', 'table'], // 插件配置
    toolbar: 'save searchreplace undo redo styles fontsizeinput fontfamily bold italic underline strikethrough subscript superscript bullist numlist removeformat forecolor backcolor lineheight align outdent indent emoticons table image media codesample code anchor link preview fullscreen help', // 工具栏配置
    toolbar_mode: 'sliding', // sliding生效条件toolbar必须为字符串,且有'|'区分,不能为数组
    toolbar_sticky: true,

    paste_data_images: true,

    file_picker_callback:handleUploadFile,
    file_picker_types:'file image media',    //默认三种类型，分别对应link、image和media组件的上传

    save_onsavecallback:handleSave
}

function handleUploadFile(callback, value, meta){
    var input=document.createElement('input')
    input.setAttribute('type','file')
    var accept_filetypes=''
    switch(meta.filetype){
        case 'file':
            accept_filetypes='.doc,.docx,.ppt,.pptx,.xls,.xlsx,.pdf,.txt'
            break
        case 'image':
            accept_filetypes='.webp,.png,.jpg,.jpeg,.gif,.svg'
            break
        case 'media':
            accept_filetypes='.weba,.wav,.mp3,.webm,.mpg,.mpeg,.avi,.wmv'
            break
    }
    input.setAttribute('accept',accept_filetypes)
    input.click()
    input.onchange=async ()=>{
        var file=input.files[0]
        let formData=new FormData()
        formData.append('content_type',file.type)
        formData.append('file', file, file.name)
        var ret=await axios.post(
            '/api/information/upload',
            formData,
            {headers:{'Content-Type':'multipart/form-data'}}
        )
        callback('/minio/information/'+ret.data.name)
    }
}

function handleSave(){
    console.log('saved')
}

</script>

<template>
<!-- <vue3-tinymce v-model="content" :setting="setting"/> -->
<!-- <textarea id="tinymce"/> -->
<Editor
    api-key="36rgelkun4qn8x6kibn1gjtirkc6rbsnfsj8753hb84xqc6e"
    :init="setting"
    v-model="content"
/>

<textarea>{{ content }}</textarea>
</template>

<style scoped lang="scss">

</style>